<template>
  <div>
    <div class="cheer-up" v-if="!bannerUrl">
      {{$t("TopBanner.ynlyxyjtqjxjy")}}
    </div>
    <transition name="fade">
      <div v-if="bannerUrl">
        <img v-if="bannerUrl" class="top-banner" :src="bannerUrl" alt="">
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  data () {
    return {
        bannerUrl:'',
        bannerDefaultUrl:'/static/img/banner.jpg',
    }
  },
    methods:{
        getData(){
            let url = this.$api_url.get_banner+"?page=task";
            this.$axios.get(url).then((res)=>{
                if(res.data.code === 0){
                    this.bannerUrl = res.data.data;
                } else{
                    this.bannerUrl = this.bannerDefaultUrl;
                }
            })
        },
    },
    mounted() {
        setTimeout(()=>{
            this.getData();
        },1000);
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top-banner{
    height:4rem;
    width: 100%;
    top: 0;
    position: fixed;
    left: 0;
    z-index: 10;
  }
  .cheer-up{
    text-align: center;
    position: absolute;
    top:2rem;
    left:0;
    width:100%;
  }
</style>
